<template>
  <Layout>
    <div class="container">
      <div class="journal-hero">
        <h1 class="journal-header">
          a wise person once said...
        </h1>
      </div>
    </div>

    <g-link 
      class="journal-post"
      v-for="item in journals" 
      :key="item.id"
      :to="`/journal/${item.id}`"
    >
      <div class="container journal">
        <h2 class="journal-title">{{ item.title }}</h2>
        <p class="journal-excerpt">{{ item.excerpt }}</p>
      </div>
    </g-link>
      
  </Layout>
</template>

<page-query>
query {
	journals: allJournal {
    edges {
      node {
        id
        path
        title
        excerpt
      }
    }
  }
}
</page-query>

<script>
import TitlePage from "@/components/TitlePage"

export default {
  name: 'JournalsList',
  metaInfo: {
    title: 'Journals List'
  },
  components: { TitlePage },
  computed: {
    journals () {
      return this.$page.journals.edges.map(item => item.node)
    }
  }
}
</script>

<style scoped>
.container.journal {
  max-width: 720px;
}
.journal-hero {
  padding: 4rem 0;
  text-align: center;
  color: var(--color-base-1);
}
.journal-header {
  font-size: 3rem;
  font-weight: 700;
  padding: 0;
  margin: 0;
}
.journal-post {
  display: block;
  padding: 2rem 0;
  text-decoration: none;
  transition: background 0.5s ease;
}
.journal-post > * {
  transition: transform 0.5s ease;
}
.journal-post:hover {
  background-color: var(--color-base-1);
}
.journal-post:hover > * {
  transform: translateX(4rem);
}
.journal-post h1,
.journal-post h2 {
  margin: 0;
  padding: 0;
}
.journal-title {
  font-size: 2rem;
  color: var(--color-contrast);
}
.journal-excerpt {
  color: var(--color-contrast-1);
}

@media (min-width: 560px) {
  .journal-post {
    padding: 3rem 0;
  }
}

@media (min-width: 860px) {
  .journal-post {
    padding: 5rem 0;
  }
}
</style>
